<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="form">
		<view>
			<form  @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">菜谱名:</view>
					<input :maxlength="10" class="uni-input" v-model="form.recipe" placeholder="请输入(最大10个字符)"
						placeholder-style="color:#F76260" />
				</view>
				<view class="uni-form-item uni-column" style="margin-top: 20rpx;">
					<view class="title">喜爱程度：</view>
					<radio-group v-model="form.like_degree" @change="radioChange" class="radio_group">
						<label class="radio_label">
							<radio value="low" :checked="form.like_degree === 'low'" /> <text>低</text>
						</label>
						<label class="radio_label">
							<radio value="normal" :checked="form.like_degree === 'normal'" /><text>正常</text>
						</label>
						<label class="radio_label">
							<radio value="hight" :checked="form.like_degree === 'hight'" /><text>高</text>
						</label>
					</radio-group>
					<view class="tips">根据喜爱程度高低,出现的频率会相应变化</view>
				</view>
				<view class="btns">
					<button class="btn" @click="mode=='add'?formSubmit():formEdit()" :class="mode=='add'?'btn':'edit_activity'">{{mode=='add'?'提交':'编辑'}}</button>
					<button class="btn" @click="go">去大转盘</button>
				</view>
			</form>
		</view>
		<view class="table">
			<text>已添加菜谱列表:</text>
			<scroll-view @touchmove.stop.prevent="moveHandle" class="scroll_view" :scroll-y="true">
				<view class="table_items">
					<view class="table_header">
						<view class="header_1">菜谱名</view>
						<view class="header_2">喜爱程度</view>
						<view class="header_3">创建时间</view>
					</view>
					<view class="items" v-for="(itm,idx) in lists" @click="edit(idx)">
						<view class="items_1">{{itm.recipe}}</view>
						<view class="items_2"
							:style="{color:itm.like_degree=='normal'?'#333':itm.like_degree=='hight'?'green':'red'}">
							{{itm.like_degree=='normal'?'正常':itm.like_degree=='hight'?'高':'低'}}
						</view>
						<view class="items_3">{{itm.create_time}}</view>
					</view>
				</view>
				
			</scroll-view>
			<view class="edit_tips">⭐️⭐ ️点击菜谱所在行可进行修改！⭐️⭐</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					recipe: '',
					like_degree: 'normal'
				},
				lists: [],
				mode:'add',
				editIndex:0,
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			moveHandle() {},
			go() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			edit(index){
				this.mode='edit'
				this.editIndex=index
				this.form.recipe=this.lists[index].recipe
				this.form.like_degree=this.lists[index].like_degree
			},
			radioChange(e) {
				console.log('e', e);
				this.form.like_degree = e.detail.value
			},
			async getList() {
				let list = uni.getStorageSync('localRecipeList') ? uni.getStorageSync('localRecipeList') : []
				this.lists = list
				console.log('菜谱列表', this.lists);
			},
			formSubmit: function() {
				if (this.lists?.length == 10) {
					uni.showToast({
						title: '当前菜谱已存在10个了,无法再添加了',
						icon: 'none'
					})
					return
				}
				if (!this.form.recipe) {
					uni.showToast({
						title: '请输入菜谱名称',
						icon: 'none'
					})
					return
				}
				if(this.lists.length>0){
					this.lists.forEach((itm, idx) => {
						let isDone =true
						if (itm?.recipe == this.form.recipe) {
							uni.showToast({
								title: '菜谱名称重复，请换一个名称吧',
								icon: 'none'
							})
							isDone =false
							return
						}
						
						if (idx == this.lists?.length - 1 && isDone) {
							uni.showLoading({ title: '新增提交中···' });
							let list = []
							list = [...this.lists]
							const year = new Date().getFullYear()
							const month = Number(new Date().getMonth() + 1) < 10 ? '0' + Number(new Date()
								.getMonth() + 1) : Number(new Date().getMonth() + 1)
							const day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date()
								.getDate()
							const date = year + '-' + month + '-' + day
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
								  title: '提交成功',
								  icon: 'success'
								});
								list?.push({
									recipe: this.form.recipe,
									like_degree: this.form.like_degree,
									create_time: date
								})		
								uni.setStorageSync('localRecipeList', list);
								this.getList();		
								this.form.recipe = '';
								this.form.like_degree = 'normal';
								this.mode = 'add';
								this.editIndex = null;
							}, 2000);
						}
					})
				}else{
					uni.showLoading({ title: '新增提交中···' });
					let list = []
					list = [...this.lists]
					const year = new Date().getFullYear()
					const month = Number(new Date().getMonth() + 1) < 10 ? '0' + Number(new Date()
						.getMonth() + 1) : Number(new Date().getMonth() + 1)
					const day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date()
						.getDate()
					const date = year + '-' + month + '-' + day
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
						  title: '提交成功',
						  icon: 'success'
						});
						list?.push({
							recipe: this.form.recipe,
							like_degree: this.form.like_degree,
							create_time: date
						})		
						uni.setStorageSync('localRecipeList', list);
						this.getList();		
						this.form.recipe = '';
						this.form.like_degree = 'normal';
						this.mode = 'add';
						this.editIndex = null;
					}, 2000);
				}
			},
			formEdit() {
			  if (!this.form.recipe) {
				uni.showToast({
				  title: '请输入菜谱名称',
				  icon: 'none'
				});
				return;
			  }

			  const isDuplicate = this.lists.some((itm, idx) => {
				return itm.recipe === this.form.recipe && idx !== this.editIndex;
			  });

			  if (isDuplicate) {
				uni.showToast({
				  title: '菜谱名称重复，请换一个名称吧',
				  icon: 'none'
				});
				return;
			  }

			  // 修改逻辑
			  uni.showLoading({ title: '修改提交中···' });

			  let list = [...this.lists];
			  const now = new Date();
			  const year = now.getFullYear();
			  const month = (now.getMonth() + 1).toString().padStart(2, '0');
			  const day = now.getDate().toString().padStart(2, '0');
			  const date = `${year}-${month}-${day}`;

			  setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
				  title: '提交成功',
				  icon: 'success'
				});

				list[this.editIndex].recipe = this.form.recipe;
				list[this.editIndex].like_degree = this.form.like_degree;
				list[this.editIndex].date = date;

				uni.setStorageSync('localRecipeList', list);
				this.getList();

				this.form.recipe = '';
				this.form.like_degree = 'normal';
				this.mode = 'add';
				this.editIndex = null;
			  }, 2000);
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.table {
		max-height: 1000rpx;
		margin-top: 40rpx;
		.edit_tips{
			width: 100%;
			text-align: center;
			color:orange;
			margin-top: 20rpx;
			font-size: 26rpx;
		}

		text {
			margin-bottom: 20rpx;
			color: #88abda;
		}

		.scroll_view {
			max-height: 1000rpx;
			background-color: #fff;
			color: #333;
			margin-top: 20rpx;
			border-radius: 12rpx;

			.table_items {
				.table_header {
					height: 80rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #e2e2e2;
					.header_1 {
						width: 40%;
						line-height: 80rpx;
						text-align: center;
						color:#bfbfbf;
						border-right: 1rpx solid #e2e2e2;
					}

					.header_2 {
						width: 25%;
						line-height: 80rpx;
						text-align: center;
						color:#bfbfbf;
						border-right: 1rpx solid #e2e2e2;
						
					}

					.header_3 {
						width: 35%;
						line-height: 70rpx;
						text-align: center;
						color:#bfbfbf;
					}
				}

				.items {
					height: 70rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #e2e2e2;

					.items_1 {
						width: 40%;
						line-height: 70rpx;
						text-align: center;
						border-right: 1rpx solid #e2e2e2;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						
					}

					.items_2 {
						width: 25%;
						line-height: 70rpx;
						text-align: center;
						border-right: 1rpx solid #e2e2e2;
					}

					.items_3 {
						width: 35%;
						line-height: 80rpx;
						text-align: center;
					}
				}
			}
		}
	}

	.btns {
		width: 100%;
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			background-color: #88abda;
			color: #fff;
			width: 300rpx;
		}
		.edit_activity{
			background-color: #fff;
			color: #fa541c;
			width: 300rpx;
		}
	}

	.form {
		height: 100vh;
		padding: 20rpx;
		background: linear-gradient(155deg, #c9d6ff, #e2e2e2);
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.uni-input {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	.radio_group {
		display: flex;
		gap: 20px;

		.radio_label {
			display: flex;
			align-items: center;
		}
	}

	.tips {
		margin-top: 20rpx;
		color: #999;
		font-size: 26rpx;
		color: orange;
	}
</style>